<template>
	<div id="building">
		<div id="building-header">
			<p>
				<i class="el-icon-notebook-2" style="color: blue;"></i>
				<strong>下单-待从购物车转订单</strong>
			</p>
		</div>


		<br>
		<el-table :data="data.orders" border highlight-current-row fit show-overflow-tooltip style="width: 100%;">
			<el-table-column label="商品图">
				<template v-slot:default="scope">
					<img :src="pic(scope.row.book.pic)" alt="scope.row.book.name" style="width: 50%;">
				</template>
			</el-table-column>
			<el-table-column prop="book.name" label="商品名称" min-width="150px">
			</el-table-column>
			<el-table-column prop="price" label="单价/元（人民币）" min-width="58px"></el-table-column>
			<el-table-column prop="num" label="商品数量"></el-table-column>
			<el-table-column label="总价格/元（人民币）" min-width="58px">
				<template v-slot:default="scope">
					{{ price(scope.row) }}
				</template>
			</el-table-column>
		</el-table>
		<div
			style="height: 30px;border-top: 10px solid lightgray;border-left: 5px solid lightgray;border-right: 5px solid lightgray;background-color: rgb(220, 223, 230);text-align: center;">
			<H4 v-show="data.ordid===0"> 请确认完善收货人信息</H4>
			<H4 v-show="data.ordid>0" style="color: red;"> 请确认订单号: {{ data.ordid }}</H4>
		</div>
		<div
			style="display: flex;justify-content: center;border-left: 5px solid lightgray;border-right: 5px solid lightgray;">
			<el-form :model="data.shipInfo" status-icon :rules="rules" ref="shipInfo" class="demo-ruleForm">
				<br>
				<el-form-item label="姓名" prop="name" required>
					<el-input v-model="data.shipInfo.name" autocomplete="off" :disabled="data.ordid > 0"></el-input>
				</el-form-item>
				<el-form-item label="电话" prop="phone" required>
					<el-input type="number" v-model="data.shipInfo.phone" autocomplete="off"
						class="remove-bottom-number" :disabled="data.ordid > 0"></el-input>
				</el-form-item>
				<el-form-item label="地址 " prop="addr" required>
					<el-input v-model="data.shipInfo.addr" autocomplete="off" :disabled="data.ordid > 0"></el-input>
				</el-form-item>
			</el-form>
		</div>
		<div id="building-button">
			<div v-show="data.ordid>0" style="width: 50%;min-width: 50%;">
				<span>订单下单成功, 单号：</span>
				<span style="font-weight: 700;color: red;">{{ data.ordid }}</span>
			</div>
			<div style="margin-right: 20px;display: flex;">
				总价：<span style="color: red;border-bottom: 1px solid black;font-weight: 600;">{{ total }}￥</span>
			</div>
			<el-button v-show="data.ordid===0" type="danger" size="default" @click="make">下单</el-button>
			<el-button v-show="data.ordid>0" type="danger" size="default" @click="gifMoney">去付款</el-button>
		</div>
	</div>
</template>

<script setup>
	import {
		computed,
		onMounted,
		reactive,
		ref
	} from 'vue';
	import api from '@/api';
	import pic from '@/api/pic';
	import router from '../../../router';
	import store from '../../../store';


	const data = reactive({
		orders: [],
		shipInfo: {},
		amount: 0,
		ordid: 0
	})

	// 初始化表单
	const shipInfo = ref({
		name: '',
		addr: '',
		phone: ''
	});

	const validatePhone = (rule, value, callback) => {
		if (value === '') {
			callback(new Error('请输入电话'));
		} else {
			if (value.length !== 11) {
				callback(new Error('无效电话'));
			}
			// 验证通过，调用 callback()
			callback();
		}
	}

	const rules = {
		// name: [{ validator: validateName, trigger: 'blur' }],
		phone: [{
			validator: validatePhone,
			trigger: 'blur'
		}],
		// addr: [{ validator: validateAddr, trigger: 'blur' }]
	};

	const total = computed(() => {
		let total = 0;
		for (let i = 0; i < data.orders.length; i++) {
			let order = data.orders[i].price * data.orders[i].num;
			total = total + order;
		}

		data.amount = total.toFixed(2)
		return data.amount
	})

	const price = (row) => {
		return row.price * row.num
	}

	const make = () => {
		// 通过 shipInfoRef.value 访问表单实例
		if (shipInfo.value) {
			shipInfo.value.validate((valid) => {
				if (valid) {
					const json = {
						orders: data.orders,
						amount: total.value, // 使用计算属性的值
						ship2name: data.shipInfo.name, // 注意：模板中 prop 是 name，这里需对应
						ship2phone: data.shipInfo.phone,
						ship2addr: data.shipInfo.addr
					};

					console.dir(json)

					api.postj('/api/cart/add2Order', json).then((resp) => {
						if (resp.data.code === 200) {
							data.ordid = resp.data.data;
						}
					});
				} else {
					console.log('表单验证未通过');
				}
			});
		}

	}

	const gifMoney = () => {
		router.push({
			path: "/info/payment",
			query: {
				id: data.ordid
			}
		})
	}

	onMounted(() => {
		data.orders = store.state.cart
		api.get("/api/user/shipInfo").then((resp) => {
			data.shipInfo = resp.data.data
		})
	})
</script>

<style lang="less">
	#building {
		height: 87vh;
		padding-top: 10px;
		padding-left: 12%;
		padding-right: 12%;

		#building-header {
			text-align: center;
			border-bottom: 2px solid #b3d8ff;
		}

		.demo-ruleForm {
			width: 80%;
		}

		.el-color-picker__icon,
		.el-input,
		.el-textarea {
			width: 80%;
		}

		#building-button {
			border: 5px solid #b3d8ff;
			display: flex;
			justify-content: end;
			align-items: center;
		}

		/* 去除输入框右侧的加减箭头 */
		.remove-bottom-number input::-webkit-outer-spin-button,
		.remove-bottom-number input::-webkit-inner-spin-button {
			-webkit-appearance: none;
		}

		/* 去除输入框右侧的加减箭头 */
		.remove-bottom-number input[type="number"] {
			-moz-appearance: textfield;
		}
	}
</style>